<template>
	<view class="detail-page">
		<view style="height: 100%;">
			<view class="detail_layout" v-if="archivesInfo.archivesId">
				<headerComponent style="margin-bottom: 22rpx;"></headerComponent>
				<view flex>
					<view class="archives-info card" style="flex:1;max-width:40%;margin-right: 32rpx;">
						<CaseInfoCard style="margin-bottom: 20rpx;" :data="archivesInfo" />
						<OperatePlatformTable PlatformTable style="margin-bottom: 26rpx;" :params="archivesInfo" :list="logList" @expand="onExpand" />
						<WeatherCard />
					</view>
					<view style="flex:2.1">
						<DetailMainCard :archivesInfo="archivesInfo" :list="modulesList" />
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty text="暂无案卷,请新建案卷" :icon-size="200" mode="list">
					<template slot="bottom">
						<u-button type="primary" @click="toAddPage">前往添加案卷</u-button>
					</template>
				</u-empty>
			</view>
		</view>
		<u-modal v-model="modelObj.show" :content="modelObj.content" show-cancel-button @confirm="modelConfirm"></u-modal>
		<u-modal v-model="closeBaseObj.show" :content="closeBaseObj.content" show-cancel-button @confirm="closeBase"></u-modal>
		<u-popup v-model="closeBaseFormPopupShow" mode="center">
			<view class="close-popup-wrap">
				<u-form :model="closeBaseForm" ref="closeForm" class="apply-form-field" label-width="180">
					<u-form-item label="起火原因" prop="fireReason" required>
						<u-input v-model="closeBaseForm.$fireReason" type="select" @tap="onSelectType('fire_reason_type')" />
					</u-form-item>
					<u-form-item label="起火单位属性" prop="fireProperty" required>
						<u-input v-model="closeBaseForm.$fireProperty" type="select" @tap="onSelectType('fire_property_type')" />
					</u-form-item>
					<u-form-item label="火灾规模" prop="fireScale" required>
						<u-input v-model="closeBaseForm.$fireScale" type="select" @tap="onSelectType('fire_scale_type')" />
					</u-form-item>
					<u-form-item label="伤亡情况" prop="fireDeaths" required>
						<u-input v-model="closeBaseForm.fireDeaths" type="number" />
					</u-form-item>
				</u-form>
				<u-button type="primary" :loading="submitLoading" :ripple="true" @click="closeBaseSubmit">提交</u-button>
			</view>
		</u-popup>
		<u-select v-model="selectShow" mode="single-column" :list="selectList[currentSelectType]" @confirm="selectConfirm"></u-select>
		<u-modal v-model="isAppModule.show" :content="isAppModule.content" :show-cancel-button="true" @confirm="isAppModuleConfirm"></u-modal>
		<u-modal v-model="downloadModel.show" :title-style="{ color: 'red' }" :show-confirm-button="false" :show-cancel-button="true" @cancel="downloadModelCancel">
			<view class="slot-content">
				<view>{{ downloadModel.content }}</view>
				<!-- <rich-text :nodes="downloadModel.content"></rich-text> -->
			</view>
		</u-modal>
		<!-- 同步确认提示 -->
		<u-modal v-model="syncModuleObj.show" :content="syncModuleObj.content" :show-cancel-button="true" @confirm="syncConfirm" @cancel="syncModuleObj.show = false"></u-modal>
	</view>
</template>

<script>
	import {
		SYNC_STATUS_TYPE,
		SYNC_STATUS_NAMES
	} from '@/const/archives';

	import {
		mapGetters
	} from "vuex"
	import headerComponent from './components/header.vue';
	import CaseInfoCard from './components/CaseInfoCard.vue';
	import OperatePlatformTable from './components/OperatePlatformTable.vue';
	import WeatherCard from './components/WeatherCard.vue';
	import DetailMainCard from './components/DetailMainCard.vue';
	import {
		getLocalModule,
		closeAndArchiveCase,
		compressZip,
		getNetworkDatatoLocal,
		createFile
	} from '@/static/common/js/padLocalFileHandler.js'
	import {
		getArchivesDetailByEnvironment
	} from '@/common/environmentalApi/index.js'

	export default {
		components: {
			headerComponent,
			CaseInfoCard,
			OperatePlatformTable,
			WeatherCard,
			DetailMainCard
		},
		data() {
			return {
				showHeader: true,
				modelObj: {
					show: false,
					content: '该操作不可逆转，您确认继续吗？'
				},
				closeBaseObj: {
					show: false,
					content: '你确定结案归档嘛？'
				},
				closeBaseFormPopupShow: false,
				submitLoading: false,
				closeBaseForm: {
					fireReason: '',
					fireProperty: '',
					fireScale: '',
					fireDeaths: ''
				},
				selectShow: false,
				selectList: {
					fire_reason_type: [],
					fire_property_type: [],
					fire_scale_type: []
				},
				currentSelectType: 'fire_reason_type',
				archivesData: {},
				archivesType: '0',
				operatePlatformList: [],
				nowWeather: {},
				modulesList: [],
				archivesInfo: {},
				logList: [],
				isAppModule: {
					show: false,
					content: '检测到应用未安装，是否自动为您安装应用',
					downloadUrl: ''
				},
				_prg: 0,
				_showLoading: null,
				_dtask: null,
				downloadModel: {
					show: false,
					content: ''
				},
				timer: null,
				logPage: {
					pageSize: 3,
					pageNum: 1
				},
				syncModuleObj: {
					show: false,
					content: '你确认同步该案卷吗？',
					item: null
				}
			};
		},
		computed: {
			...mapGetters(['isNetworkConnected']),
			// 数据从本地上传到云端
			shouldUploadToCloud() {
				const {
					NOT_UPWARD_SYNCED,
					PENDING_UPWARD_UPDATE,
					NOT_DOWNWARD_SYNCED,
					PENDING_DOWNWARD_UPDATE,
					SYNCED
				} = SYNC_STATUS_TYPE
				return [NOT_UPWARD_SYNCED, PENDING_UPWARD_UPDATE]
			},
			// 数据从云端下载到本地
			shouldDownloadFromCloud() {
				const {
					NOT_UPWARD_SYNCED,
					PENDING_UPWARD_UPDATE,
					NOT_DOWNWARD_SYNCED,
					PENDING_DOWNWARD_UPDATE,
					SYNCED
				} = SYNC_STATUS_TYPE
				return [NOT_DOWNWARD_SYNCED, PENDING_DOWNWARD_UPDATE]
			},

		},
		onLoad() {
			uni.hideTabBar()
			// #ifdef APP-PLUS
			// this.showHeader = false;
			// #endif
		},
		onHide() {
			uni.$off('closeBase');
			uni.$off('changeType');
			uni.$off('H5Back');
			// uni.$off('archivesInfo');
			uni.$off('archivesId');
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		async onShow() {
			let archivesId = this.vuex_archives?.archivesId || null;
			// #ifdef APP-PLUS
			const data = await getArchivesDetailByEnvironment(archivesId)
			// #endif
			// #ifdef H5
			const data = await this.handleGetData(archivesId)
			// #endif
			if (data) {
				this.archivesInfo = data;
				this.$u.vuex('vuex_archives', data);
				setTimeout(() => {
					uni.$emit('getArchivesinfo', data)
				}, 100)
				uni.setStorageSync("getArchivesinfo", JSON.stringify(data));
				getLocalModule(data.archivesId, data.archivesType).then(list => {
					let arr = list.map(item => {

						return {
							...item,
							dictId: item.value,
							isExpend: false
						};
					});
					this.modulesList = arr;
					let num = 0;
					for (let i = 0; i < list.length; i++) {
						if (list[i].fileNum && list[i].fileNum > 0) {
							num++;
						}
					}
					if (num == list.length) {
						uni.setStorageSync('archivesDis', 'false');
						setTimeout(() => {
							uni.$emit('archivesDis', false);
						}, 500)
					} else {
						uni.setStorageSync('archivesDis', 'true');
						setTimeout(() => {
							uni.$emit('archivesDis', true);
						}, 500)
						uni.setStorageSync('isHaveContent', num > 0)
					}
				})
			}

			uni.$on('closeBase', () => {
				this.closeBase();
			});
			uni.$on('onSyncArchives', (archive) => {
				this.onSyncData(archive)
			})
			uni.$on('changeType', res => {
				this.modelObj.show = true;
				this.archivesData = res.data;
				this.archivesType = res.type;
			});

			uni.$on('H5Back', () => {
				this.$nextTick(() => {
					this.handleGetData(this.vuex_archives.archivesId);
				});
			});
		},
		methods: {
			toTimeline() {
				let url =
					`${this.vuex_config.H5baseUrl}/imageAssociation?token=${this.vuex_token}&archivesId=${this.archivesInfo.archivesId}`;
				uni.navigateTo({
					url: `/pages/common/msgWebview?url=${encodeURIComponent(url)}&title=火灾影像关联`
				});
			},
			toModuleList(url, item, index) {
				const path =
					`?title=${this.archivesInfo.name}&archivesId=${this.archivesInfo.archivesId}&archivesType=${this.archivesInfo.archivesType}&dictId=${item.value}&currentIndex=${index}`;
				uni.setStorage({
					key: 'moduleListUrl',
					data: path
				});
				uni.navigateTo({
					url: url + path
				});
			},
			toAddPage(url) {
				uni.navigateTo({
					url: '/pages/sys/archives/add'
				});
			},
			getLogList(archivesId) {
				this.$u.api.archives
					.logList({
						pageSize: this.logPage.pageSize,
						pageNum: this.logPage.pageNum,
						archivesId: archivesId || this.archivesInfo.archivesId
					})
					.then(res => {
						if (res.code == 200) {
							this.logList = res.rows;
						}
					});
			},
			getRightList(archivesId) {
				this.$u.api.archives.getModule(archivesId).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let list = res.data;
						let arr = list.map(item => {
							return {
								...item,
								dictId: item.value,
								isExpend: false
							};
						});
						this.modulesList = arr;
						let num = 0;
						for (let i = 0; i < list.length; i++) {
							if (list[i].fileNum && list[i].fileNum > 0) {
								num++;
							}
						}
						if (num == list.length) {
							uni.setStorageSync('archivesDis', 'false');
							setTimeout(() => {
								uni.$emit('archivesDis', false);
							}, 500)
						} else {
							uni.setStorageSync('archivesDis', 'true');
							setTimeout(() => {
								uni.$emit('archivesDis', true);
							}, 500)
							uni.setStorageSync('isHaveContent', num > 0)
						}
					}
				});
			},
			async handleGetData(archivesId) {
				let res;
				if (archivesId) {
					res = await this.$u.api.archives.info({
						archivesId
					});
				} else {
					res = await this.$u.api.archives.list({
						pageSize: 1,
						pageNum: 1
					});
					if (!res.rows.length) {
						this.archivesInfo = {};
						uni.$emit('getArchivesinfo', {});
						this.$u.vuex('vuex_archives', {});
						uni.setStorageSync('getArchivesinfo', JSON.stringify({}));
						// uni.switchTab({
						// 	url: '/pages/sys/archives/add'
						// })
						return;
					}
				}
				let data = archivesId ? res.data : res.rows[0];
				this.$u.vuex('vuex_archives', data);
				setTimeout(() => {
					uni.$emit('getArchivesinfo', data)
				}, 100)
				uni.setStorageSync("getArchivesinfo", JSON.stringify(data));
				if (!data.archivesId) {
					this.archivesInfo = {};
					return;
				}
				this.getRightList(data.archivesId);
				this.getLogList(data.archivesId);
				this.archivesInfo = data;
				return data
			},
			toApp(item) {
				// #ifdef APP-PLUS
				const isApp = plus.runtime.isApplicationExist({
					pname: item.package
				});

				if (isApp) {
					let sendData = {
						email: 'chenlengsu_it@163.com',
						password: 'password',
						mode: 'password'
					};
					plus.runtime.launchApplication({
							// pname: "com.sensopia.magicplan",
							// pname: "com.jideos.jnotes",
							pname: item.package,
							extra: sendData
						},
						e => {}
					);
				} else {
					this.isAppModule.show = true;
					this.isAppModule.downloadUrl = item.downloadUrl;
				}
				// #endif
			},
			isAppModuleConfirm() {
				let downloadApkUrl = this.isAppModule.downloadUrl;
				this._dtask = plus.downloader.createDownload(downloadApkUrl, {}, function(d, status) {
					// 下载完成
					if (status == 200) {
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(
							error) {
							uni.showToast({
								title: '安装失败',
								duration: 1500
							});
						});
					} else {
						uni.showToast({
							title: '更新失败',
							duration: 1500
						});
					}
				});
				// dtask.start();
				try {
					this._dtask.start(); // 开启下载的任务
					this._prg = 0;
					// this._showLoading = plus.nativeUI.showWaiting("正在下载"); //创建一个showWaiting对象
					this.downloadModel.show = true;
					this.downloadModel.content = '正在下载';
					this._dtask.addEventListener('statechanged', this.stateChanged, false);
				} catch (err) {
					plus.nativeUI.closeWaiting();
				}
			},
			stateChanged(task, status) {
				// 给下载任务设置一个监听 并根据状态  做操作
				switch (task.state) {
					case 1:
						// this._showLoading.setTitle("正在下载");
						this.downloadModel.content = '正在下载';
						break;
					case 2:
						// this._showLoading.setTitle("已连接到服务器");
						this.downloadModel.content = '已连接到服务器';
						break;
					case 3:
						this._prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
						// this._showLoading.setTitle("  正在下载" + this._prg + "%  ");
						this.downloadModel.content = '正在下载' + this._prg + '% ';
						break;
					case 4:
						plus.nativeUI.closeWaiting();
						this.downloadModel.show = false;
						//下载完成
						break;
				}
			},
			downloadModelCancel() {
				plus.downloader.clear();
			},
			closeBaseSubmit() {
				const archivesId = this.vuex_archives.archivesId;
				this.submitLoading = true;

				this.$refs.closeForm.validate(async valid => {
					if (valid) {
						this.closeBaseFormPopupShow = false;
						this.submitLoading = false;
						let flag = true;
						let promiseAll = [];
						this.modulesList.forEach(item => {
							if (item.fileNum == undefined || item.fileNum < 1) {
								flag = false;
							}
						});
						if (flag) {
							await closeAndArchiveCase(archivesId, this.closeBaseForm)
							uni.showToast({
								title: '结案归档'
							});
							uni.setStorageSync('archivesDis', 'true');
							setTimeout(() => {
								uni.$emit('archivesDis', true);
							}, 500)
							this.handleGetData(archivesId);
						} else {
							uni.showToast({
								title: '请将所有项目完成后，在进行归档',
								icon: 'none'
							});
						}
					} else {
						// 验证失败
						this.submitLoading = false;
					}
				});
			},
			// 结案归档
			closeBase() {
				this.closeBaseFormPopupShow = true;
				this.$nextTick(() => {
					this.$refs.closeForm.setRules(this.rules);
				})
				return;

			},
			onSyncData(archive) {
				this.syncModuleObj.show = true
				this.syncModuleObj.item = archive
			},
			async syncConfirm() {
				let archive = this.syncModuleObj.item
				if (this.isNetworkConnected) {
					uni.showLoading({
						title: '同步中',
						mask: true
					})

					if (this.shouldUploadToCloud.includes(archive.syncStatus)) {
						// await updateArchivesTime(archive.archivesId, this.$u.timeFormat(new Date(),
						// 	'yyyy-mm-dd hh:MM:ss'))
						// 更新案卷的操作时间 
						archive.pullUpdateTime = archive.pushUpdateTime = archive.updateTime = this.$u.timeFormat(
							new Date(),
							'yyyy-mm-dd hh:MM:ss')
						await createFile(archive)
						compressZip(archive.archivesId, this.vuex_user.userId).then(() => {
							uni.hideLoading()
							this.getArchivesList({}, true)
						}).catch((err) => {
							uni.hideLoading()
							console.error(err)
						})
					} else if (this.shouldDownloadFromCloud.includes(archive.syncStatus)) {
						getNetworkDatatoLocal(archive.archivesId).then(async (archiveData) => {
							archiveData.pullUpdateTime = archiveData.pushUpdateTime = archiveData.updateTime = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
							await createFile(archiveData)
							uni.hideLoading()
							this.getArchivesList({}, true)
						}).catch((err) => {
							uni.hideLoading()
							console.error(err)
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请连接网络并重新登录后再同步'
					})
				}
			},
			modelConfirm() {
				this.$u.api.archives.edit({
					archivesId: this.archivesData.archivesId,
					archivesType: this.archivesType
				}).then(res => {
					this.handleGetData(this.archivesData.archivesId);
					uni.showToast({
						title: res.msg,
						icon: res.code == 200 ? 'success' : 'none'
					});
				});
			},
			onSelectType(type) {
				this.currentSelectType = type;
				this.getSelectList(type);
			},
			getSelectList(type) {
				if (this.selectList[type].length) {
					this.selectShow = true;
					return;
				}

				if (this.vuex_config.isConnected) {
					this.$u.api.systemDict.query(type).then(res => {
						if (res.code == 200) {
							this.selectList[type] = res.data.map(item => {
								return {
									label: item.dictLabel,
									value: item.dictValue
								};
							});
							this.selectShow = true;
						}
					});
				} else {
					let selectList = {
						fire_reason_type: [{
								"label": "放火",
								"value": "1"
							},
							{
								"label": "电气",
								"value": "2"
							},
							{
								"label": "违反安全规定",
								"value": "3"
							},
							{
								"label": "吸烟",
								"value": "4"
							},
							{
								"label": "生活用火不慎",
								"value": "5"
							},
							{
								"label": "玩火",
								"value": "6"
							},
							{
								"label": "雷击",
								"value": "7"
							},
							{
								"label": "自燃",
								"value": "8"
							},
							{
								"label": "其他原因",
								"value": "9"
							},
							{
								"label": "原因不明",
								"value": "10"
							}
						],
						fire_property_type: [{
								"label": "重点单位",
								"value": "1"
							},
							{
								"label": "一般单位",
								"value": "2"
							},
							{
								"label": "高层建筑",
								"value": "3"
							},
							{
								"label": "化工企业",
								"value": "4"
							},
							{
								"label": "地下建筑",
								"value": "5"
							}
						],
						fire_scale_type: [{
								"label": "一般火灾",
								"value": "1"
							},
							{
								"label": "较大火灾",
								"value": "2"
							},
							{
								"label": "重大火灾",
								"value": "3"
							},
							{
								"label": "特别重大火灾",
								"value": "4"
							}
						]
					}

					this.selectList[type] = selectList[type]
					this.selectShow = true;
				}
			},
			selectConfirm(e) {
				switch (this.currentSelectType) {
					case 'fire_reason_type':
						this.closeBaseForm.fireReason = e[0].value;
						this.closeBaseForm['$fireReason'] = e[0].label;
						break;
					case 'fire_property_type':
						this.closeBaseForm.fireProperty = e[0].value;
						this.closeBaseForm['$fireProperty'] = e[0].label;
						break;
					case 'fire_scale_type':
						this.closeBaseForm.fireScale = e[0].value;
						this.closeBaseForm['$fireScale'] = e[0].label;
						break;
				}
			},
			onExpand(flag) {
				this.logPage.pageSize = flag ? 10 : 4
				this.$nextTick(() => {
					this.getLogList(this.archivesInfo.archivesId)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail-page {
		height: 100vh;
		background-color: $u-bg-color;
		overflow: auto;

		.empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}

		.close-popup-wrap {
			padding: 20upx 30upx;

			button {
				margin-top: 20upx;
			}
		}

		.detail_layout {
			padding: 33upx 33upx 50upx;
			overflow-y: auto;
			// height: calc(100vh - 50px);

			.archives-info {
				padding-bottom: 26rpx;
			}

			.card {
				background-color: $u-card-bg-color;
				box-shadow: 0px 3px 8px 0px rgba(211, 220, 241, 1);
				border-radius: 6px;
			}

			.current-archives {
				width: 378upx;

				// min-width: 378upx;
				.select-box {
					margin-bottom: 21upx;
				}

				.archives-base-box {
					.head {
						padding: 24upx 33upx;
						border-bottom: 3upx solid $u-border-color;
						display: flex;
						justify-content: space-between;
						align-items: center;

						uni-button {
							margin: 0;
						}

						.tit {
							display: flex;
							align-items: center;
							font-size: 26upx;
							font-weight: bold;

							&::before {
								content: '';
								display: block;
								background-color: $main-color;
								width: 6upx;
								height: 28upx;
								border-radius: 1px;
								margin-right: 12upx;
							}
						}
					}

					.content {
						padding: 13upx 33upx;
						font-size: 24upx;

						.label {
							font-weight: bold;
							margin-bottom: 6upx;
						}

						.value {
							margin-bottom: 17upx;
						}
					}
				}
			}

			.main {
				flex: 1;
				min-width: 900upx;
				margin: 0 33upx;

				.toolbars-box {
					padding: 54upx 53upx 56upx;
					margin-bottom: 33upx;
					display: flex;
					justify-content: space-between;
					text-align: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							width: 119upx;
							height: 119upx;
							margin-bottom: 17upx;
						}

						text {
							font-size: 22upx;
							color: $u-content-color;
						}
					}
				}

				.modules-box-wrap {
					background-color: #fff;
					padding: 0upx 20upx 20upx 20upx;

					.head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 24upx 24upx 24upx 0upx;

						.tit {
							display: flex;
							align-items: center;
							font-size: 26upx;

							&::before {
								content: '';
								display: block;
								background-color: $main-color;
								width: 6upx;
								height: 28upx;
								border-radius: 1px;
								margin-right: 12upx;
							}
						}

						.right {
							display: flex;
							color: $main-color;

							.more {
								margin-left: 20upx;
							}
						}
					}
				}

				.modules-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						padding: 13upx 25upx;
						margin-bottom: 22upx;
						width: 284upx;
						min-height: 182upx;

						.head {
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 25upx;
							}
						}

						.icon {
							width: 74upx;
							height: 74upx;
						}

						.name {
							font-size: 24upx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}

						.remark {
							font-size: 20upx;
							color: $u-tips-color;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}

			.right-aside {
				max-width: 589upx;
				width: 589upx;
				min-width: 589upx;

				.weather-box {
					padding: 35upx 50upx 26upx 40upx;
					margin-bottom: 30upx;
					min-width: 589upx;
					height: 277upx;
					background: url(../../../static/aidex/images/weather-bg.png);
					background-size: cover;
					border-radius: 11upx;
					color: #ffffff;

					.content {
						display: flex;
						justify-content: space-between;
						margin-bottom: 17upx;

						.date {
							width: 130upx;
							margin-right: 72upx;

							.time {
								margin-bottom: 15upx;
							}

							.week {
								margin-bottom: 8upx;
							}
						}

						.date,
						.weather {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							font-size: 22upx;
						}

						.time,
						.temp {
							font-size: 50upx;
							font-weight: bold;
						}

						.icon {
							width: 101upx;
							height: 78upx;
						}
					}

					.user-name {
						font-size: 36upx;
					}
				}

				.operate-platform-box {
					.head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 22upx 30upx 24upx;

						.tit {
							display: flex;
							align-items: center;
							font-size: 26upx;

							&::before {
								content: '';
								display: block;
								background-color: $main-color;
								width: 6upx;
								height: 28upx;
								border-radius: 1px;
								margin-right: 12upx;
							}
						}

						.right {
							display: flex;
							color: $main-color;

							.more {
								margin-left: 20upx;
							}
						}
					}

					::v-deep .uni-table {
						min-width: 740upx !important;
					}

					.table {
						.tr {
							.th {
								color: #000000;
								background-color: #fafafa;
								padding-top: 17upx;
								padding-bottom: 17upx;
							}

							.td {
								color: #000000a6;
								padding-top: 15upx;
								padding-bottom: 15upx;
							}

							.td,
							.th {
								&:first-of-type {
									padding-left: 50upx;
								}

								input {
									font-size: 22upx;
								}

								font-size: 22upx;
							}
						}
					}
				}
			}
		}

	}

	canvas-view {
		position: absolute;
		top: -2000px;
		opacity: 0;
	}

	.slot-content {
		text-align: center;

		view {
			padding: 40upx 0;
		}
	}
</style>